<template>
  <n-config-provider>
    <div class="ssd-layout flex flex-c">
      <NuxtLayout>
        <ClientOnly>
          <nuxt-page></nuxt-page>
          <template #fallback>
            <!-- 这将在服务器端渲染 -->
            <div class="flex align-center justify-center flex-c" style="height: 100vh;background:#212021;">
              <div class="pr" style="text-align: center">
                <img src="/img/loading2.gif"  alt="">
              </div>
            </div>
          </template>
        </ClientOnly>
      </NuxtLayout>
    </div>
  </n-config-provider>
</template>
<script setup>
onMounted(()=>{
})
</script>
<style lang="scss">
/*毛玻璃效果*/
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: grayscale(1) blur(0.5rem);
}


/*左右推拉效果*/
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.2s;
}

.slide-left-enter-from {
  opacity: 0;
  transform: translate(50px, 0);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translate(-50px, 0);
}

.slide-right-enter-from {
  opacity: 0;
  transform: translate(-50px, 0);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translate(50px, 0);
}


/*淡入淡出*/
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/*推拉淡出*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

/*心跳效果*/
.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.ssd-layout {
  .ssd-content {
    flex: 1;
    background: #fff;
    margin-left: 150px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .ssd-content.no {
    margin-left: 0px
  }

  .ssd-aside.no{
    width: 0;
    max-width: 0;
    left:-220px;
  }

  .ssd-aside {
    background: #fff;
    border-right: 1px solid #f1f2f4;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    top: 0;
    padding-bottom: 20px;
    width: 220px;
    max-width: 220px;
    z-index: 99;
    align-content: space-between;
    display: flex;
    flex-direction: column;
    transition: color .3s var(--n-bezier), border-color .3s var(--n-bezier), min-width .3s var(--n-bezier), max-width .3s var(--n-bezier), transform .3s var(--n-bezier), background-color .3s var(--n-bezier), left 1s;

    .operation-list {
      padding: 5px 0;
      position: relative;
    }

    .operation-list .team-upgrade i {
      width: 51px
    }

    .operation-list .operation-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      text-decoration: none;
      margin: 1px 8px;
      height: 38px;
      border-radius: 4px;
      line-height: 38px;
      font-size:14px;
    }

    .operation-list .operation-item .trash-link {
      color: inherit
    }

    .operation-list .operation-item .probation {
      font-size: 12px;
      margin-left: 6px;
      color: #f5a623;
      height: 20px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 1px 6px;
      border-radius: 4px;
      opacity: 1;
      background: #2878ff;
      color: #fff
    }

    .operation-list .operation-item .resource-new {
      width: 40px;
      padding-left: 6px
    }

    .operation-list .operation-item .team-upgrade i {
      padding-left: 6px
    }

    .operation-list .operation-item .new_apply {
      font-weight: 700;
      font-size: 10px;
      border-radius: 8px 8px 8px 0;
      line-height: 14px;
      padding: 4px 10px;
      color: #2878ff;
      background: #e0ebff;
      margin-left: 10px
    }


    .operation-list .operation-item .expire-text {
      color: #2f2e3fa6;
      font-size: 12px;
      line-height: 30px;
      float: right;
      margin-left: 6px
    }

    .operation-list .operation-item img, .operation-list .operation-item i {
      padding: 0 6px 0 10px;
      vertical-align: middle
    }

    .operation-list .operation-item span {
      vertical-align: middle
    }

    .operation-list .operation-item:hover {
      background: #f2f4f7
    }

    .operation-list .operation-item__more {
      margin: 0
    }

    .operation-list .operation-item__more:hover {
      border-radius: 0
    }

    .operation-list .active {
      background: #e5ecf3 !important
    }

  }

  .ssd-aside.expand {
    left: -200px;
  }
}

.select_team {
  padding: 0 8px;
  box-sizing: border-box;
  position: relative;
  background: white;
  user-select: none
}

.select_team .current_team {
  display: flex;
  align-items: center
}

.select_team .current_team .logo_box {
  width: 106px;
  margin: 0 8px;
  cursor: pointer
}

.select_team .current_team .title_box {
  display: flex;
  align-items: center;
  justify-content: center
}

.select_team .current_team .title_box .title_line {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center
}

.select_team .current_team .title_box .title_line .team_name {
  cursor: pointer;
  height: 40px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  color: #2f2e3f;
  line-height: 40px;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select_team .current_team .title_box .title_line .team_name.corp-style {
  max-width: 192px
}

.select_team .current_team .title_box .title_line .package-name {
  height: 20px;
  margin-left: 4px;
  width: 65px;
  cursor: pointer
}

.select_team .current_team .title_box.dingding-team-box {
  position: relative;
  top: -6px
}

.select_team .current_team .title_box.dingding-team-box .dingding-sign {
  font-size: 12px;
  top: 30px;
  left: 0;
  opacity: .4;
  position: absolute
}

.select_team .current_team .arrow-drop-down {
  padding-left: 10px;
  display: inline-block;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  background: url(https://lhcdn.lanhuapp.com/dashboard/production/assets/arrow_drop_down.b14f7e15.svg) center center no-repeat;
  transition: all .3s;
  transform: rotate(0)
}

.select_team .current_team .arrow-drop-down.trans {
  transition: all .3s;
  transform: rotate(180deg)
}

.team-list-popover {
  width: 320px;
  padding: 8px 0 4px !important;
  border-radius: 8px !important;
  border: 1px solid #f1f2f4;
  box-shadow: 0 10px 32px #1d29392e
}

.search-footer {
  width: 100%;
  height: 36px;
  background-color: #f6f6f6;
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: center
}

.search-footer .tip {
  display: flex;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0em;
  color: #1f2126b3;
  padding: 0 23px;
  align-items: center
}

.search-footer .tip svg {
  width: 24px;
  height: 24px;
  padding-right: 8px
}

.search-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px
}

.search-num .search-type {
  height: 36px;
  padding: 9.5px 12px;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0em;
  color: #1f2126b3;
  display: flex;
  align-items: center
}

.search-num .go-more {
  color: #2878ff;
  cursor: pointer;
  padding-right: 10px;
  display: flex;
  align-items: center
}

.search-num .go-more svg {
  font-weight: 700;
  transform: rotate(270deg)
}


.cover .thumbnail-error {
  box-shadow: none !important
}


.search-item {
  position: relative;
  height: 58px;
  padding: 14px 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-right: 16px;
  cursor: pointer;
  border-radius: 4px
}

.search-item .icon {
  width: 30px;
  height: 30px;
  margin-right: 12px
}

.search-item .info {
  width: 550px
}

.search-item .info .title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0em;
  color: #1f2126;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis
}

.search-item .info .path {
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0em;
  color: #1f212680;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis
}

.search-empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.search-empty svg {
  width: 80px;
  height: 80px
}

.search-empty .dis {
  padding-top: 4px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0em;
  color: #1f2126b3;
  text-align: center
}

.search-tab-outer {
  height: 100%;
  overflow-y: hidden
}

.search-tab-outer .search-tab {
  height: 100%
}

.search-tab-outer .search-tab .recommand-text {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0em;
  color: #1f2126b3;
  padding-left: 12px;
  padding-top: 10px;
  padding-bottom: 6px
}

.n-scrollbar-content {
  min-height: 100%
}

.search-content {
  flex: 1;
  padding: 16px 0 16px 12px;
  overflow: hidden;
  height: 100%
}

.search-content .n-tabs-tab--active {
  font-weight: 600
}

.search-content .n-tabs-tab--active .n-tabs-tab__label {
  color: #2878ff !important
}

.search-content .n-tab-pane {
  padding: 8px 0 0;
  height: calc(100% - 36px)
}

.search-content .n-tabs-tab__label {
  color: #3d3d3d
}

.search-content .n-tabs-pane-wrapper, .search-content .n-tabs {
  height: 100%
}

.spin {
  --n-opacity-spinning: 1 !important
}

.search-modal {
  height: 540px;
  display: flex;
  flex-direction: column
}

.search-modal .invite-code-result-wrapper {
  display: flex;
  flex-direction: row;
  padding: 16px 30px;
  align-items: center
}

.search-modal .invite-code-result-wrapper .icon {
  align-self: start
}

.search-modal .invite-code-result-wrapper .icon img {
  width: 30px;
  margin-right: 8px
}

.search-modal .invite-code-result-wrapper .info {
  flex: 1
}

.search-modal .invite-code-result-wrapper .info .title {
  font-size: 16px;
  color: #1f2126
}

.search-modal .invite-code-result-wrapper .info .description {
  font-size: 12px;
  color: #1f2126b3
}

.search-modal .invite-code-result-wrapper .btn {
  width: 88px;
  height: 32px;
  color: #fff;
  background-color: #2878ff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  font-size: 14px
}

.search-modal .invite-code-result-wrapper .btn:hover {
  background-color: #4e95ff
}

.search-modal .invite-code-result-wrapper .btn:active {
  background-color: #1957d2
}

.svg-close[data-v-0a2bd34a] {
  width: 24px !important;
  height: 24px !important
}

.search-container {
  flex: 1;
  padding: 0 32px 0 0;
  margin-left: 6px
}

.search-container .input {
  background-color: #f2f4f7;
  border-radius: 4px
}

.search-container-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.item-container {
  height: 98%;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px
}

.item-container .top-info {
  display: flex;
  height: 100%;
  align-items: center
}

.item-container .top-info .user-setting {
  width: 56px !important
}

.item-container .top-info .explore-more-wrapper {
  height: 24px;
  width: 24px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: content-box
}

.item-container .top-info .item-icon {
  width: 48px;
  height: 48px;
  position: relative
}

.item-container .top-info .item-icon img, .item-container .top-info .item-icon i {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  left: 50%;
  margin-left: -12px
}

.item-container .top-info .item-icon:hover img, .item-container .top-info .item-icon:hover i {
  background-color: #f0f0f0;
  border-radius: 3px
}

.item-container .top-info .item-icon .item-icon-center {
  position: absolute;
  top: 50%;
  margin-top: -12px;
  left: 50%;
  margin-left: -12px
}

.ssd-contentbox {
  padding: 0 10px 20px;
}


.material-square {
  position: relative;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
}

.m-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  padding-right: 24px;
  margin-bottom: 10px;
}

.material-square .title {
  position: absolute;
  cursor: default;
  color: #2f2e3f;
  width: 80px;
  margin-bottom: 8px;
}


.material-square .close:hover {
  background: #e5ecf3
}

.material-square .items {
  width: auto;
  gap: 15px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  white-space: nowrap;
}

.material-square .items:hover {
  overflow: auto hidden;
}

@media screen and (min-width: 1921px) {
  .material-square .items .item .cover,
  .material-square .items .item {
    width: 283px !important;
  }
}

.material-square .items .item {
  width: 233px;
  background: #fff;
  border-radius: 8px;
  position: relative;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .08);
}

.material-square .items .item .desc {
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.material-square .items .item:hover .cover {
  opacity: .7
}

.material-square .items .item:hover .btn {
  cursor: pointer;
  display: flex
}

.material-square .items .item .btn {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  border-radius: 4px;
  box-sizing: border-box;
  width: 90px;
  height: 32px;
  top: calc(50% - 32px);
  left: calc(50% - 44px);
  background: #2878ff;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0px;
  color: #fff
}

.material-square .items .item .mg-cover {
  cursor: pointer;
  opacity: 1 !important
}

.material-square .items .item .cover {
  display: block;
  width: 100%;
  height: 152px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border: 1px solid #e9ecf1;
  transition: all .3s ease
}

.material-square .items .item .info {
  overflow: hidden;
  display: flex
}

.material-square .items .item .info span, .material-square .items .item .info img {
  width: 24px;
  height: 24px;
  margin-right: 4px;
  vertical-align: middle
}

.file-list-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.setting-content {
  padding: 10px 0 0 0
}

.setting-content .setting-content-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box
}

.setting-content .setting-content-grid .right {
  display: flex;
  justify-content: flex-end;
  position: relative
}

.setting-content .setting-content-grid .right .setting-show {
  margin-left: 24px;
  cursor: pointer
}

.setting-content .setting-content-grid .right .setting-show:hover {
  background-color: #e9ecf1;
  border-radius: 3px
}

.setting-content .setting-content-grid .right .setting-type {
  margin-left: 24px
}

.setting-content .setting-content-list {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 0 8px;
  box-sizing: border-box
}

.setting-content .setting-content-list .select {
  width: fit-content
}

.setting-content .setting-content-list .change_img {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: all .3s ease-in-out;
  position: relative
}

.setting-content .setting-content-list .change_img svg {
  width: 24px;
  height: 24px
}

.setting-content .setting-content-list .change_img .setting-show {
  cursor: pointer
}

.setting-content .setting-content-list .change_img .setting-show:hover {
  background-color: #e9ecf1;
  border-radius: 3px
}


.setting-tabs {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}

.setting-tabs .setting-tab {
  margin-right: 24px;
  cursor: pointer;
  font-size: 14px;
  line-height: 24px;
  color: #1f2126;
  flex: 0 0 auto;
}


.setting-tabs .setting-tab.active {
  color: #2878ff
}

.setting-tabs .setting-tab.all {
  margin-right: 30px
}

.gda-btn {
  padding: 4px 8px;
  border-radius: 4px;
}

.gda-btn-primary {
  color: #fff;
  background-color: #2254f4;
}

.gda-btn-success {
  color: #fff;
  background-color: #45c985;
}

.gda-btn-danger {
  color: #fff;
  background-color: #de3d0b;
}

.gda-dropdown-menu {
  position: relative;
  padding: 30px;
  margin: 0;
  text-align: left;
  list-style-type: none;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 12px;
  outline: none;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.35), 0px 8px 32px 2px rgba(0, 0, 0, 0.1);
  transform: translateZ(0);
}

.user-dropdown {
  color: #33383e;
  cursor: pointer;
  background: #fff;
}

.user-dropdown__menu {
  width: 360px;
  max-height: calc(100vh - 80px);
  padding: 20px 0 8px !important;
  overflow: scroll;
}

.user-dropdown__menu .gda-dropdown-menu-item {
  padding: 9px;
  margin: 0 16px;
  border-radius: 4px
}

.user-dropdown__menu .gda-dropdown-menu-item-divider {
  margin: 16px 16px 12px
}

.user-dropdown__menu-item.gda-dropdown-menu-item {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #000
}

.user-dropdown__menu-info {
  padding: 0 !important;
  background: #fff;
  border-radius: 4px 4px 0 0;
  cursor: default !important
}

.user-dropdown__menu-info:hover {
  background: #fff !important
}

.user-dropdown__user-info {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 20px;
  color: #9da3ac
}

.user-dropdown__avatar {
  flex-shrink: 0;
  margin-right: 8px
}

.user-dropdownbox {
  display: none;
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 100
}

.user-dropdown__avatar:hover .user-dropdownbox {
  display: block
}

.user-dropdown__name {
  display: flex;
  align-items: center;
  margin-right: -6px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap
}

.user-dropdown__name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.user-dropdown__name div {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 16px;
  padding: 0;
  margin-left: 8px;
  overflow: hidden;
  line-height: 16px;
  color: #7f8792
}

.user-dropdown__name div span {
  display: inline-block;
  padding: 3px 5px 1px;
  font-size: 12px;
  font-weight: 400;
  background: #f1f2f4;
  border-radius: 3px;
  transform: scale(.833) translateZ(0);
  transform-origin: left
}

.user-dropdown__info {
  flex: 1;
  overflow: hidden;
  font-style: normal
}

.user-dropdown__card-row {
  display: flex;
  align-items: center;
  margin: 16px -6px 0
}

.user-dropdown__card-row-card {
  flex: 1;
  width: 0;
  height: 100%;
  margin: 0 6px
}

.user-dropdown__user-id {
  display: flex;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #7f8792
}

.user-dropdown__user-id > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.user-dropdown__user-id .gdesign-icon-copy {
  flex-shrink: 0;
  margin-left: 6px;
  font-size: 14px;
  cursor: pointer
}

.user-dropdown__user-id .gdesign-icon-copy:hover {
  color: #2254f4
}

.user-dropdown__vip-card, .user-dropdown__hb-vip-card {
  margin-top: 12px
}

.business-banner-vip-card-public {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-xlarge, 12px)
}

.business-banner-vip-card-public__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 18px 20px;
  overflow: hidden;
  font: var(--text-h6-bold);
  color: var(--static-color-white, #fff)
}

.business-banner-vip-card-public__header .business-vip-time__time {
  font: var(--text-p1-regular)
}

.business-banner-vip-card-public__header-left {
  flex: 1
}

.business-banner-vip-card-public__header-row {
  display: flex;
  align-items: center
}

.business-banner-vip-card-public__body {
  position: relative;
  z-index: 2
}

.business-banner-vip-card-public__body-tip {
  height: 34px;
  padding: 0 16px;
  font: var(--text-h7-regular);
  line-height: 34px;
  background: #ffffff26
}

.business-banner-vip-card-public__title {
  position: relative;
  z-index: 2;
  flex: 1;
  font: var(--font-family-body)
}

.business-banner-vip-card-public__icon {
  width: 24px;
  height: 24px;
  margin-right: 4px
}

.business-banner-vip-card-public__time {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  font-size: 12px
}

.business-banner-vip-card-public__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px;
  margin: 8px;
  font: var(--text-p2-regular);
  background: #ffffffe6;
  border-radius: var(--border-radius-large)
}

.business-banner-vip-card-public__item:last-child:after {
  content: none
}

.business-banner-vip-card-public__item:after {
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  height: 1px;
  background: var(--background-color-divider-regular, rgba(0, 0, 0, .08));
  content: ""
}

.business-banner-vip-card-public__item-left {
  flex: 1
}

.business-banner-vip-card-public__item-name {
  flex: 1;
  margin-right: 8px;
  font: var(--text-h7-bold);
  color: var(--text-color-primary, #222529)
}

.business-banner-vip-card-public__item-tip {
  margin-top: 8px;
  font: var(--text-p2-regular);
  color: var(--text-color-tertiary, #7f8792)
}

.business-banner-vip-card-public__item-badge {
  position: absolute;
  top: -14px;
  right: 0;
  padding: 2px 6px;
  font: var(--text-p3-bold);
  color: var(--business-mood-color-primary-regular, #cb6a1a);
  background: var(--business-mood-background-color-primary-regular, linear-gradient(90deg, #fbeedb .03%, #ffe7c4 100%));
  border-radius: 0 6px
}

.business-banner-vip-card-public__item-btn {
  min-width: 80px
}

.business-banner-vip-card-public__item-btn-wrapper {
  position: relative
}

.business-banner-vip-card-public__item-remain {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 8px;
  margin-left: 8px;
  font: var(--text-p2-regular)
}

.business-banner-vip-card-public__item-remain:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 8px;
  background: var(--color-transparent-white-600, rgba(255, 255, 255, .35));
  content: "";
  transform: translateY(-50%)
}

.business-banner-storage-card-public {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--spacing-300, 12px) 0;
  overflow: hidden;
  border-radius: var(--border-radius-xlarge, 12px)
}

.business-banner-storage-card-public:hover {
  background: var(--background-color-primary-hover);
  cursor: pointer
}

.business-banner-storage-card-public:hover:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--text-p2-bold);
  color: var(text-color-primary);
  background: var(--background-color-primary-hover);
  content: var(--storage-card-buy-text)
}

.business-banner-storage-card-public__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px
}

.business-banner-storage-card-public__header--danger .business-banner-storage-card-public__text label {
  color: var(--text-color-error, #f54531)
}

.business-banner-storage-card-public__body {
  position: relative;
  z-index: 2;
  text-align: center
}

.business-banner-storage-card-public__title {
  font: var(--text-p2-regular);
  color: var(--text-color-secondary)
}

.business-banner-storage-card-public__text {
  flex: 1;
  width: 100%;
  overflow: hidden;
  font: var(--text-h7-bold);
  text-align: center;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1
}

.business-banner-storage-card-public__text span {
  color: var(--text-color-primary, #222529)
}

.business-banner-material-card-public {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--spacing-300, 12px) var(--spacing-200, 8px);
  overflow: hidden;
  border-radius: var(--border-radius-xlarge, 12px)
}

.business-banner-material-card-public:hover {
  background: var(--background-color-primary-hover);
  cursor: pointer
}

.business-banner-material-card-public:hover:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--text-p2-bold);
  color: var(text-color-primary);
  background: var(--background-color-primary-hover);
  content: var(--material-card-buy-text)
}

.business-banner-material-card-public__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px
}

.business-banner-material-card-public__header > span {
  font: var(--text-h7-bold);
  color: var(--text-color-primary)
}

.business-banner-material-card-public__body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center
}

.business-banner-material-card-public__body > span {
  font: var(--text-p2-regular);
  color: var(--text-color-secondary)
}

.business-banner-hb-vip-card-public {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-600, 24px) var(--spacing-500, 20px);
  overflow: hidden;
  background: url(https://cdn.dancf.com/fe-assets/20240409/9b6a87fa85586136d43be051182a7e8b.png) top right / 126px auto no-repeat, linear-gradient(180.51deg, #fff0f5 -7.27%, #fff7f9 48.69%, #ffe9ef 104.02%);
  border-radius: var(--border-radius-xlarge, 12px)
}

.business-banner-hb-vip-card-public__name {
  font: var(--text-h7-bold, 600 14px / 1.3);
  color: var(--text-color-primary, #222529)
}

.business-banner-hb-vip-card-public__desc {
  margin-top: 3px;
  font: var(--text-p2-regular, 400 12px / 1.5);
  color: var(--text-color-tertiary, #7f8792)
}

.business-banner-hb-vip-card-public__desc-em {
  color: #ff5967
}

.business-banner-hb-vip-card-public__tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 3px 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #f7f9fa;
  vertical-align: 2px
}

.business-banner-hb-vip-card-public__tag:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #ff5967;
  border-radius: 4px;
  content: "";
  transform: skew(-10deg)
}

.business-banner-hb-vip-card-public__btn {
  min-width: 80px
}

.business-banner-gaodou-card-public {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--spacing-300, 12px) var(--spacing-200, 8px);
  overflow: hidden;
  border-radius: var(--border-radius-xlarge, 12px)
}

.business-banner-gaodou-card-public:hover {
  background: var(--background-color-primary-hover);
  cursor: pointer
}

.business-banner-gaodou-card-public:hover:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--text-p2-bold);
  color: var(text-color-primary);
  background: var(--background-color-primary-hover);
  content: var(--gaodou-card-buy-text)
}

.business-banner-gaodou-card-public__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px
}

.business-banner-gaodou-card-public__header > span {
  font: var(--text-h7-bold);
  color: var(--text-color-primary)
}

.business-banner-gaodou-card-public__body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center
}

.business-banner-gaodou-card-public__body > span {
  font: var(--text-p2-regular);
  color: var(--text-color-secondary)
}

.business-banner-gaodou-card-public__text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color-primary, #222529);
  text-align: right
}

.business-banner-gaodou-card-public__text span {
  font-weight: 500;
  color: var(--text-color-placeholder, #9da3ac)
}

.gda-avatar-circle,
.gda-avatar-circle img {
  border-radius: 50%;
}

</style>
